@import 'mixins/clear.less';

// 最外层的包裹元素
#wrapper {
    // 头部
    header {
        // 上半部分
        .headTop {
            background-color: #eaeaea;
            height: 30px;
            // 版心元素
            .headTopMain {
                width: 1200px;
                // 居中
                margin: 0 auto;
                // 垂直居中
                line-height: 30px;
                .clearfix();
                // 左侧
                .left {
                    h5 {
                        // 浮动，让文字变成一排
                        float: left;
                        margin-right: 5px;
                    }
                    p {
                        // 浮动，让文字变成一排
                        float: left;
                        a {
                            &:first-child {
                                border-right: 1px solid #b3aeae;
                                padding-right: 5px;
                            }
                        }
                    
                    }
                }
                .right {
                    float: right;
                    nav {
                        font-size: 0;
                        a {
                            font-size: 12px;
                            margin-right: 10px;
                            padding-right: 10px;
                            border-right: 1px solid #b3aeae;
                            &:last-child {
                                border: none;
                                margin-right: 0;
                                padding-right: 0;
                            }
                        }
                    }
                }
            }
            
        }
        // 下半部分
        .headBottom {
            .headBottomMain {
                width: 1200px;
                margin: 0 auto;
                .clearfix();
                // logo
                .logo {
                    float: left;
                    a {
                        img {
                            width: 175px;
                            height: 56px;
                            margin: 25px 45px;
                        }
                    }
                }
                .search {
                    float: right;
                    margin-top: 35px;
                    input {
                        // 搜索框
                        &:first-child {
                            box-sizing: border-box;
                            width: 490px;
                            height: 32px;
                            padding: 0 4px;
                            border: 3px solid #ea4a36;
                            float: left;
                        }
                        // 提交按钮
                        &:last-child {
                            width: 68px;
                            height: 32px;
                            color: #fff;
                            background-color: #ea4a36;
                            border: none;
                        }
                        // 修饰place holder
                        &::-webkit-input-placeholder {
                            color: yellowgreen;
                        }
                    }
                }
            }
        }
    }
}